<template>
	<view>
		<view class="two-title-box">
			<view class="two-title">
				<view @click="changeTextFlagA" :class="[flagA==true?'title-color':'']">全选</view>
				<view @click="changeTextFlagB" :class="[flagB==true?'title-color':'']">批量报工</view>
			</view>
		</view>
		<view class="main">
			<view class="big-content" v-for="(item,index) in list" :key="index">
				<view class="content-box">
					<view class="first">
						<view class="first-newline-a">{{item.carName}}</view>
						<view class="first-newline-b"><span>车号：</span><span>{{item.carNum}}</span></view>
						<view class="first-newline-c"><span>车型：</span><span>{{item.carType}}</span></view>
					</view>
					<view class="second">
						<view class="second-newline-a">
							<u-icon name="clock"></u-icon><span class="time">{{item.carTime}}</span>
						</view>
						<view class="second-newline-b"><span>物料编码：</span><span>{{item.carCode}}</span></view>
						<view class="second-newline-c"><span>物料名称：</span><span>{{item.carNickName}}</span></view>
					</view>
					<view class="third">
						<u-checkbox-group>
							<u-checkbox @change="checkboxChange" v-model="item.checked" shape="circle"
								></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view  class="center" @click="receive">
					<u-icon name="checkbox-mark"></u-icon>
					<span>{{item.confirm}}</span>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"reportWork",
		data() {
			return {
				flagA:'',//全选默认不选
				flagB:'',//批量领工默认不选
				current: 0,
				list: [{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
					
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				{
					// name: 'apple',
					checked: false,
					disabled: false,
					carName:"G70K车体三次厂修",
					carTime:"2022-02-15 09:30",
					carNum:"4826529",
					carType:"C64T",
					carCode:"HT247-02-91",
					carNickName:"止轮",
					confirm:"报工",
				},
				], //圆选择
			};
		},
		methods:{
			// 控制报工
			receive(){
				uni.showToast({
					title:"报工成功",
					icon:"success",
				})
			},
			checkboxChange(e) {
				//console.log(e);
			},
			changeTextFlagA(){
				this.flagA=true
				this.flagB=false
				this.list.map(val => {
								val.checked = !val.checked;
							})
				// console.log(this.list.checked);
			},
			changeTextFlagB(){
				this.flagA=false
				this.flagB=true
			}
		},
	}
</script>

<style lang="scss" scoped>
.two-title-box {
		// width: 100%;
		height: 160rpx;
		padding-top: 40rpx;
		background-color: #efefef;
		line-height: 160rpx;
		// margin-bottom: 10rpx;
		// padding-bottom: 10rpx;
	}

	.two-title {
		// margin-top: 10px;

		// width: 100%;
		// height: 80rpx;
		// padding-bottom: 10rpx;
		display: flex;
		justify-content: space-around;
		line-height: 40px;
		background-color: #fff;

	}

	.main {
		// margin-top: 32rpx;
		// padding-top: 40rpx;
		padding: 0rpx 20rpx;
		
		// width: 100%;
		height: calc(100vh - 380rpx);
		overflow: scroll;
		background-color: #efefef;

	}

	.content-box {
		// width: 96%;
		// height: 100px;
		// margin: auto;
		// padding: 6rpx 10rpx ;
		// height: 200rpx;
		padding: 10rpx 0rpx;
		padding-left: 30rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #999999;
		
	}

	.big-content {
		// width: 100%;
		// height: 280rpx;
		border: 1px solid #fff;
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 20rpx;
	}

	.first,
	.second {
		padding-top: 20rpx;
	}
	.second {
		padding-left: 10rpx;
	}

	.third {
		padding-top: 16rpx;
		margin-left: -40rpx;
	}

	.first>view:nth-of-type(2),
	.second>view:nth-of-type(2) {
		padding: 20rpx 0rpx;
	}
	.first-newline-a{
		width: 258rpx;
	}
	.first-newline-b {
		width: 258rpx;
	}
	.first-newline-c {
		width: 258rpx;
	}
	.second-newline-a {
		width: 320rpx;
	}
	.second-newline-b {
		width: 340rpx;
	}
	.second-newline-c {
		width: 340rpx;
	}

	.center {
		border-top: 1px solid;
		border-color: rgba(242, 242, 242, 1);
		// width: 60%;
		// margin: auto;
		text-align: center;
		line-height: 40px;
		color: #0079FE;
		font-size: 32rpx;
	}
	.title-color {
		    color: rgb(52, 120, 247)
	}
	.center>span {
		margin-left: 10rpx;
	}
	.time {
		margin-left: 10rpx;
	}
</style>
